<template>
  <div class="swiper-container">
    <!-- 导航栏 -->
    <nav class="swiper-nav" ref="navContainer">
      <div
        v-for="(item, index) in menuItems"
        :key="index"
        :class="{ active: currentPage === index }"
        @click="goTo(index, item)">
        {{ item }}
      </div>
    </nav>
    <!-- 页面内容 -->
    <div class="swiper-wrapper">
      <div class="vertical-table">
        <div v-for="(doctor, index) in doctor" :key="index" class="data-block">
          <div class="table-row">
            <div class="table-cell" style="text-align: center;">
              <img :src="doctor.doctorPic" :width="400" :height="400" />
            </div>
          </div>
          <div class="table-row">
            <el-descriptions class="margin-top" title="医生简历" :column="3" size="2" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  姓名
                </template>
                <el-tag size="small">{{ doctor.doctorName }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  职位
                </template>
                <el-tag size="small">{{ doctor.doctorPositions }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  医院
                </template>
                <el-tag size="small">{{ doctor.doctorHospital }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  科室
                </template>
                <el-tag size="small"> <dict-tag :options="dict.type.hospital_department" :value="doctor.doctorDepartments" /></el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  咨询价格(H币/次)
                </template>
                <el-tag size="small">{{ doctor.doctorPrice }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  个人简介
                </template>
                <el-tag size="small">{{ doctor.doctorProfile }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  擅长领域
                </template>
                <el-tag size="small">{{ doctor.doctorField }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  服务患者数
                </template>
                <el-tag size="small">{{ doctor.advisoryCount }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  好评率
                </template>
                <el-tag size="small">{{ doctor.goodRate*100 }}%</el-tag>
              </el-descriptions-item>
              <template slot="extra">
                <el-button type="primary" size="small" @click="advisory(doctor.id)">立即咨询</el-button>
              </template>
            </el-descriptions>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/swiper.css';
import { getDicts } from "@/api/system/dict/data";
import {insertAdvisory, listConsultation} from "@/api/consultation/consultation";
import {getInfo} from "@/api/login";


export default {
  dicts: ['hospital_department'],
  data() {
    return {
      currentPage: 0, // 当前显示的页面索引
      menuItems: [], // 导航栏菜单项
      hospital_department: [], // 页面数据
      doctorForm:{},
      doctor:[],
      doctorReq:{}
    };
  },
  created() {
    this.getDicts("hospital_department").then(response => {
      this.hospital_department = response.data;
      this.hospital_department.forEach(item => {
        this.menuItems.push(item.dictLabel);
      });
      if (this.menuItems.length > this.hospital_department.length) {
        // 页面数量小于导航栏菜单项数量，复制页面数据
        const diff = this.menuItems.length - this.hospital_department.length;
        for (let i = 0; i < diff; i++) {
          this.hospital_department.push(this.hospital_department[i]);
        }
      }
    });
    this.findByDoctor(this.doctorForm)
  },
  mounted() {
    // 初始化 Swiper 实例，设置选项和事件
    this.swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto', // 每次只能滑动一个页面
      loop: false, // 不循环到第一页
      on: {
        slideChangeTransitionEnd: () => {
          // 监听滑动结束事件，更新当前激活的导航栏索引和对应的页面数据
          this.currentPage = this.swiper.realIndex;
          this.setNavScrollPosition();
          // 获取当前页面对应的 menuItems 值
          const currentMenuItem = this.menuItems[this.currentPage]
        }
      }
    });
     getInfo().then(res=>{
       this.doctorReq.userId=res.data.user.userId;
     })
  },


  methods: {
    advisory(id){
      this.doctorReq.doctorId=id;
      this.doctorReq.advisoryState=1;
      insertAdvisory(this.doctorReq).then(res=>{
        if (res.code == 200){
          this.$router.push({ path: '/consultation/advisory', query: {doctorId:this.doctor[0].doctorId}});
        }else {
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      })
    },
    findByDoctor(doctorForm){
      listConsultation(doctorForm).then(response => {
        console.log(response);
        this.doctor = response.data.rows
      });
    },
    goTo(index,item) {
      // 点击导航栏菜单项时，切换到相应的页面
      this.currentPage = index;
      this.swiper.slideTo(index);
      this.doctorForm.doctorDepartments=item
      this.findByDoctor(this.doctorForm)
    },
    setNavScrollPosition() {
      const navContainer = this.$refs.navContainer;
      const activeNavItem = navContainer.querySelector('.active');
      if (!activeNavItem) return;
      const containerWidth = navContainer.clientWidth;
      const itemWidth = activeNavItem.clientWidth;
      let itemsWidth = 0;
      const navItems = navContainer.querySelectorAll('.swiper-nav > div');
      for (let i = 0; i < navItems.length; i++) {
        const item = navItems[i];
        const itemTotalWidth =
          item.offsetWidth +
          parseInt(getComputedStyle(item).marginLeft) +
          parseInt(getComputedStyle(item).marginRight) +
          parseInt(getComputedStyle(item).paddingLeft) +
          parseInt(getComputedStyle(item).paddingRight) +
          parseInt(getComputedStyle(item).borderLeftWidth) +
          parseInt(getComputedStyle(item).borderRightWidth);
        itemsWidth += itemTotalWidth;
      }
      const containerScrollLeft =
        activeNavItem.offsetLeft +
        itemWidth / 2 -
        containerWidth / 2 -
        (itemsWidth - containerWidth) / 2;
      navContainer.scrollLeft = containerScrollLeft;
    },
    getDicts(type) {
      return getDicts(type);
    }
  }
};
</script>

<style>
.data-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}

/* 为了演示效果，这里只设置了一些基本样式，请根据实际需求自行修改 */
.swiper-nav {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  background-color: #333;
  color: #fff;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* 解决在iOS上滚动时卡顿的问题 */
  scrollbar-width: thin; /* 添加滚动条宽度属性 */
  scrollbar-color: #999 transparent; /* 设置滚动条颜色 */
}

.swiper-nav::-webkit-scrollbar {
  height: 8px; /* 设置滚动条高度 */
}

.swiper-nav::-webkit-scrollbar-thumb {
  background-color: #999; /* 设置滚动条颜色 */
  border-radius: 4px; /* 设置滚动条圆角 */
}

.swiper-nav div {
  padding: 10px;
  cursor: pointer;
}

.swiper-nav div.active {
  border-bottom: 3px solid #fff;
}

.swiper-slide {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
